<template>
    <div class="box">
        <h2>Son1 子组件</h2>
        从vuex中获取的值: <label>{{ $store.state.count }}</label>
        <br>
        <button @click="handleAdd">值 + 1</button>
        <button @click="handleAddFive">值 + 5</button>
        <button @click="changeFn">改标题</button>
    </div>
</template>

<script>
export default {
    name: 'Son1Com',
    methods: {
        handleAdd() {
            // 提交调用 mutations
            this.$store.commit('addCount')
        },
        handleAddFive() {
            this.$store.commit('addFive')
        },
        changeFn() {
            this.$store.commit('changeTitle')
        }
    }
}
</script>

<style lang="css" scoped>
.box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
}

h2 {
    margin-top: 10px;
}
</style>
